<nz-spin [nzSpinning]="isSpinning" [nzTip]="'正在初始化模块信息...'">
  <section class="in-index" *ngIf="viewType==0 ">
    <!-- <p class="title" *ngIf="showTitile">
      <span>{{componentConfig.ModuleCaption}}</span>
    </p> -->
    <div class="table-operations" style="margin: 32px 0;padding: 0 2%;">
      <button style="background: #ef4954;color: #fff;" nz-button (click)="gotoDrill()">
        <i class="anticon anticon-plus"></i>
        <span>新增</span>
      </button>
      <button nz-button  (click)="goBack()">
        <i class="anticon anticon-rollback"></i>
        <span>返回</span>
      </button>
      <button nz-button (click)="getEntityList()" [nzLoading]="loadingData">
        <i class="anticon anticon-reload"></i>
        <span>刷新</span>
      </button>

    </div>
    <nz-table #nzTable #nzFixedHeader nzBordered [nzLoading]="loadingData" [nzFrontPagination]="false" [nzData]="listEntities.entities"
      [nzTotal]="listEntities.recordTotalCount" [(nzPageIndex)]="listEntities.currentPageIndex" (nzPageIndexChange)="getEntityListAsync(true)"
      [(nzPageSize)]="listEntities.pageSize">
      <thead nz-thead>
        <tr>
          <th nzShowCheckbox [(nzChecked)]="allChecked" [nzIndeterminate]="indeterminate" (nzCheckedChange)="checkAll($event)" *ngIf="isHaveCheckedField"
            style="width: 60px;">
          </th>
          <ng-container *ngFor="let formCol of arSystemFormControls">
            <th [nzShowSort]="formCol.canSortable" [(nzSort)]="sortField[formCol.fieldName]" (nzSortChange)="sort(formCol.fieldName,$event)"
              style="text-align: center;" *ngIf="formCol.showInTable">
              <span>{{formCol.fieldCaption}}</span>
            </th>
          </ng-container>
          <th nz-th style="text-align: center;">操作</th>
        </tr>
      </thead>
      <tbody nz-tbody style="text-align: center;">
        <tr nz-tbody-tr *ngFor="let item of nzTable.data">
          <td nzShowCheckbox [(nzChecked)]="item.IsChecked" (nzCheckedChange)="refreshStatus($event)" *ngIf="isHaveCheckedField">
          </td>
          <ng-container *ngFor="let formCol of arSystemFormControls">
            <td nz-td *ngIf="formCol.showInTable">
              <ng-container [ngSwitch]="formCol.fieldType">
                <span *ngSwitchCase="7">{{(item[formCol.fieldName]?item[formCol.fieldName]:'') | cnBoolean | dictionary:formCol.fieldData}}</span>
                <!-- 图片 -->
                <span *ngSwitchCase="10">
                  <img *ngIf="item[formCol.fieldName]" (click)="showImageView(httpService.IP_PORT+item[formCol.fieldName])" [src]="httpService.IP_PORT+item[formCol.fieldName]"
                    class="avatar" style="height: 30px;width: 30px; cursor: pointer; margin: 0 auto;">

                  <img *ngIf="!item[formCol.fieldName]" [src]="httpService.IP_PORT+'/userfiles/userphotos/timg.jpg'" class="avatar" style="height: 30px;width: 30px;margin: 0 auto;">
                </span>
                <!-- upload -->
                <span *ngSwitchCase="11">
                  <a [href]="httpService.IP_PORT+item[formCol.fieldName]" target="_blank">下载文件</a>
                </span>
                <span *ngSwitchCase="13">
                  <span style="width: 30px;height: 30px;background-color: gray;"></span>
                </span>
                <span *ngSwitchDefault>{{item[formCol.fieldName] | dictionary:formCol.fieldData}}</span>
              </ng-container>
            </td>
          </ng-container>

          <td nz-td>
            <ng-container *ngFor="let op of tableOptons">
              <a *ngIf="op.navigatType==0" (click)="navigateCustom(op.urlLink,item[componentConfig.KeyFieldName])">
                <i [class]="op.iconCss" *ngIf="op.iconCss"></i>{{op.caption}}
              </a>
              <a *ngIf="op.navigatType==1" (click)="showModalForComponent(item,op.tag)">
                <i [class]="op.iconCss" *ngIf="op.iconCss"></i>{{op.caption}}
              </a>
            </ng-container>
            <ng-container *ngIf="tableOptons.length>2">
              <br/>
            </ng-container>
            <!--修改-->
            <a *ngIf="componentConfig.ButtonSet.Edit" (click)="startDrill(item.id)">
              <i class="anticon anticon-edit"></i>查看演练内容
            </a>
            <nz-popconfirm *ngIf="componentConfig.ButtonSet.Dell" [nzTitle]="'确定要删除信息吗？'" (nzOnConfirm)="deleteEntity(item[componentConfig.KeyFieldName])">
              <a nz-popconfirm>
                <i class="anticon anticon-close"></i>删除
              </a>
            </nz-popconfirm>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </section>

  <nz-modal [nzVisible]="preViewImage.showImageModal" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="preViewImage.showImageModal=false">
    <ng-template #modalContent>
      <img [src]="preViewImage.imageModalUrl" [ngStyle]="{ 'width': '100%' }" />
    </ng-template>
  </nz-modal>
</nz-spin>
